<template>
	<view class="list">
		<view class="header" v-for="(item, index) in list" :key="index" @click="gotodetail(item.id)">
			<view class="title flex">
				<text class="name">{{ item.name }}</text>
				<view class="flex flex-column" @click.stop="collection(index)">
					<u-icon name="star-fill" size="38rpx" color="#FFB300"></u-icon>
					<text class="text">取消收藏</text>
				</view>
			</view>
			<view class="tags flex">
				<text class="tag" v-if="item.labels" v-for="(tag, index) in item.labels">{{ tag }}</text>
			</view>
			<view class="business flex">
				<text class="label">营业时间：</text>
				<text class="value">{{ item.operatingHours }}</text>
			</view>
			<view class="power flex">
				<text class="label">最大功率：</text>
				<text class="value">{{ item.maxPower }}kw</text>
			</view>
			<view class="address flex">
				<image class="location" src="@/static/mine/info/location.png" mode="aspectFill"></image>
				<text class="label">{{ item.address }}</text>
			</view>
		</view>
		
		<view class="empty" v-if="list.length == 0">
			<u-empty mode="data"></u-empty>
		</view>
		
		<!-- 加载更多 -->
		<u-loadmore v-if="list && list.length > 0" :status="loadMoreStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					page: 1,
					size: 15
				},
				isLoading: false,
				isFinished: false,
				list: []
			}
		},
		
		computed: {
			loadMoreStatus() {
				if (this.isLoading) return 'loading'
				if (this.isFinished) return 'nomore'
				return 'loadmore'
			}
		},
		
		onLoad() {
			this.initList();
		},
		
		onReachBottom() {
			this.formData.page += 1;
		},
		
		methods: {
			initList() {
				if (this.isFinished || this.isLoading) return
				this.isLoading = true
				this.$http_api.stationFavoriteList(this.formData).then(res => {
					if (!res) {
							this.isFinished = true
							return
						}
						let { records = [], total = 0, current = 1, pages = 1 } = res || {}
						
						// 处理标签
						records = this.processStationLabels(records)
						
						this.list = this.formData.page === 1 ? records : [...this.list, ...records]
						this.isFinished = current >= pages
					}).catch(err => {
						this.isFinished = true
					}).finally(() => {
						this.isLoading = false
					})
			},
			
			// 处理充电站标签
			processStationLabels(records) {
				if (!Array.isArray(records)) {
					return []
				}
				
				return records.map(item => {
					try {
						let labels = [];
						// 配套服务
						if (item.serviceTypes && Array.isArray(item.serviceTypes)) {
							labels.push(...this.getFilterLabels('serviceType', item.serviceTypes))
						}
						// 科技特色
						if (item.technologyFeatures && Array.isArray(item.technologyFeatures)) {
							labels.push(...this.getFilterLabels('technologyFeatures', item.technologyFeatures))
						}
						// 停车场、停车费、充电方式标签为单个
						labels = this.getFilterOtherLabels(item.parkingArea, item.parkingFee, item.chargingType, labels)
						item.labels = labels
						return item;
					} catch (error) {
						item.labels = []
						return item
					}
				})  
			},
			
			getFilterLabels(type, indices) {
				if (!Array.isArray(indices) || !this.$store.state[type]) {
					return [];
				}
				const labels = indices.map(index => {
					const item = this.$store.state[type].find(label => label.value == index)
					return item.name.replaceAll('\r\n', '')
				})
				return labels
			},
			// 单选筛选条件
			getFilterOtherLabels(parkingArea, parkingFee, chargingType, labels) {
				// 停车场
				const parkingAreaLabel = this.$store.state.parkingType.find((item, index) => parkingArea == item.value)
				if (parkingAreaLabel) {
					labels.push(parkingAreaLabel.name)
				}
				// 停车费
				const parkingFeeLabel = this.$store.state.parkingFee.find((item, index) => parkingFee == item.value)
				if (parkingFeeLabel) {
					labels.push(parkingFeeLabel.name)
				}
				// 充电方式
				const chargingTypeLabel = this.$store.state.chargingType.find((item, index) => chargingType == item.value)
				if (chargingTypeLabel) {
					labels.push(chargingTypeLabel.name)
				}
				return labels;
			},
			
			//跳转详情
			gotodetail(id) {
				uni.navigateTo({
					url:"/pages/index/detail?id="+id
				})
			},
			
			// 收藏、取消收藏
			collection(index) {
				this.$http_api.cancelStationFavorite({ stationId: this.list[index].id }).then(res => {
					this.list.splice(index, 1);
					uni.$u.toast('取消收藏成功')
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding-bottom: 60rpx;
	}
	
	.header {
		background: #fff;
		padding: 30rpx;
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 28rpx;

		.title {
			justify-content: space-between;
			margin-bottom: 20rpx;

			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
			}

			.collect {
				width: 40rpx;
				height: 40rpx;
			}
			
			.text {
				font-family: "PINGFANG";
				font-weight: 600;
				font-size: 19rpx;
				color: #333333;
			}
		}
		
		.location {
			width: 20rpx;
			height: 26rpx;
			margin-right: 4rpx;
		}

		.tags {
			margin-bottom: 20rpx;

			.tag {
				font-size: 22rpx;
				color: #777;
				font-family: "PINGFANG";
				margin-right: 10rpx;

				&:not(:last-child)::after {
					content: '';
					display: inline-block;
					width: 1rpx;
					height: 15rpx;
					background: #aaa;
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}
		}
		
		.business, .power {
			margin-bottom: 15rpx;

			.label,
			.value {
				font-size: 24rpx;
				color: #333;
				font-weight: 400;
				font-family: "PINGFANG";
			}
		}

		.address {
			justify-content: flex-start;

			.label {
				flex: 1;
				padding-right: 40rpx;
				font-size: 24rpx;
				color: #333;
				font-family: "PINGFANG";
				max-width: calc(100vw - 100rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.distance {
				align-self: flex-start;

				.icon {
					width: 16rpx;
					height: 16rpx;
					margin-right: 5rpx;
				}

				text {
					font-size: 22rpx;
					color: #777;
					font-family: "PINGFANG";
				}
			}
		}

		.station-tags {
			display: inline-flex;
			align-items: center;
			background: #1C6EFB;
			border-radius: 5rpx;
			height: 32rpx;
			padding: 0 0 0 4rpx;

			.tag {
				display: inline-flex;
				align-items: center;

				&.station {
					text {
						display: inline-block;
						font-size: 20rpx;
						font-family: "PINGFANG";
						border-radius: 7rpx;
						padding: 2rpx 5rpx;
						line-height: 20rpx;
						color: #fff;
					}
				}

				&.invoice {
					text {
						display: inline-block;
						font-size: 20rpx;
						font-weight: 400;
						font-family: "PINGFANG";
						color: #AAA;
						background: #F6FAFF;
						border-radius: 5rpx;
						margin: 1rpx;
						height: 30rpx;
						padding: 0 10rpx;
						margin-left: 5rpx;
					}
				}
			}
		}
	}
</style>